<template>
    <div>
        <div class="ef-tooltar" style="background:#ffffff">
            <span class="h-panel-title">数据源管理</span>

            <div style="float:right">
                <Button :no-border="true" @click="close">关闭</Button>
            </div>
        </div>
        <div class="h-panel" style="margin:10px;background:#ffffff">
            <div class="h-panel-bar">
                <span class="link" @click="add">新增</span>
                <i class="h-split"></i>
                <span class="link" @click="edit">更新</span>
                <i class="h-split"></i>
                <Poptip content="确认删除?" @confirm="del">
                    <a>删除</a>
                </Poptip>
                <div class="h-panel-right">
                    <Search @search="search" v-model="searchValue" v-width="240" showSearchButton><i
                            class="h-icon-search"></i></Search>
                </div>
            </div>
            <div class="h-panel-body bottom-line">
                <Table :datas="datas" :columns="columns" :selectRow="true" align="center" @rowSelect="rowSelect">
                </Table>
            </div>
        </div>
        <Modal v-model="opened" v-bind="params">
            <div slot="header">{{  name  }}</div>
            <div v-width="500">
                <Form ref="form" :validOnChange="true" :showErrorTip="true" :model="model">
                    <FormItem label="驱动名称" prop="name">
                        <input type="text" v-model="model.name" />
                    </FormItem>
                    <FormItem label="驱动类型" prop="driverName">
                        <input type="text" v-model="model.driverName" />
                    </FormItem>
                    <FormItem label="连接地址" prop="sourceUrl">
                        <input type="text" v-model="model.sourceUrl" />
                    </FormItem>
                    <FormItem label="初始数量" prop="maxIdleConns">
                        <input type="text" v-model="model.maxIdleConns" />
                    </FormItem>
                    <FormItem label="最大数量" prop="maxOpenConns">
                        <input type="text" v-model="model.maxOpenConns" />
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <button class="h-btn" @click="opened = false">取消</button>
                <button class="h-btn h-btn-primary" @click="next">下一步</button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    mounted() {
        this.search();
    },
    data() {
        return {
            datas: [],
            columns: [
                { title: "唯一标识", prop: "id" },
                { title: "驱动名称", prop: "name" },
                { title: "驱动类型", prop: "driverName" },
                { title: "初始数量", prop: "maxIdleConns" },
                { title: "最大数量", prop: "maxOpenConns" },
            ],
            row: {},
            searchValue: "",
            opened: false,
            params: {
                hasMask: false,
                closeOnMask: true,
                hasDivider: true,
            },
            name: "",
            action: "",
            model: {
                id: "",
                name: "",
                driverName: "",
                sourceUrl: "",
                maxIdleConns: "",
                maxOpenConns: "",
            },
        };
    },
    methods: {
        search() {
            this.$axios
                .put("/cfdatasources", { name: this.searchValue })
                .then((res) => {
                    this.datas = res.data;
                });
        },
        rowSelect(data) {
            this.row = data;
        },
        close() {
            this.$router.push("/");
        },
        next() {
            if (this.action == "add") {
                this.add();
            } else {
                this.edit();
            }
        },
        add() {
            if (!this.opened) {
                this.model = {};
                this.name = "新增";
                this.opened = true;
                this.action = "add";
            } else {
                this.$axios.post("/cfdatasources", this.model).then((res) => {
                    if (res.data.code == "0000") {
                        this.$Message.success(res.data.msg);
                        this.opened = false;
                        this.search();
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                });
            }
        },
        edit() {
            if (!this.opened) {
                this.model = this.row;
                this.name = "更新";
                this.opened = true;
                this.action = "edit";
            } else {
                this.$axios.put("/cfdatasources/edit", this.model).then((res) => {
                    if (res.data.code == "0000") {
                        this.$Message.success(res.data.msg);
                        this.opened = false;
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                });
            }
        },
        del() {
            this.$axios.delete("/cfdatasources/" + this.row.id).then((res) => {
                if (res.data.code == "0000") {
                    this.search();
                    this.$Message.success(res.data.msg);
                } else {
                    this.$Message.error(res.data.msg);
                }
            });
        },
    },
};
</script>
